<template>
  <el-container>
    <el-main class="main-bg">
      <el-form ref="searchForm" :model="searchForm" label-width="100px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="企业名称">
              <el-input
                v-model="searchForm.unit_name"
                placeholder="请输入企业名称"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="执法人员" prop="raw_person_id">
              <el-select
                v-model="searchForm.raw_person_id"
                :loading="oneLoading"
                filterable
                placeholder="请选择执法人员"
              >
                <el-option
                  v-for="(item, index) in personOptions"
                  :key="index"
                  :label="item.codeName"
                  @click.native="handleName(item.codeName)"
                  :value="item.codeValue"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="检查状态">
              <el-select
                v-model="searchForm.inspect_status"
                placeholder="请选择检查状态"
              >
                <el-option
                  v-for="item in PLUGINS_MET_INSPECT_STATUS"
                  :key="item.codeValue"
                  :label="item.codeName"
                  :value="item.codeValue"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" class="text-right">
            <el-button
              type="primary"
              icon="iconfont iconxianxing_sousuo"
              @click="handleSearch"
            >
              查询
            </el-button>
            <el-button
              type="warning"
              icon="iconfont iconxianxing_zhongzhi"
              @click="handleReset"
            >
              重置
            </el-button>
          </el-col>
        </el-row>
      </el-form>
      <Table
        ref="table"
        class="data-table"
        style="width: 100%"
        :current-page="page"
        :page-size="limit"
        :total="total"
        :index="false"
        :table-data="tableData"
        :header-data="tableHeader"
        :loading="loading"
        @now-page="handlePage"
        @now-size="handleSize"
        @table-sort="handleSort"
      />
    </el-main>
  </el-container>
</template>

<script>
import addtable from "@/mixins/addtable";
import eventType from "@/mixins/eventType";
import { getCheckCompanyList, getLawPerson } from "@/api";
export default {
  name: "history-list",
  mixins: [addtable, eventType],
  data() {
    return {
      searchForm: {
        unit_name: "",
        district_id: "",
        district_name: "",
        raw_person_id: "",
        raw_person_name: "",
        inspect_status: "", //已完成
      },
      detailId: "",
      tableHeader: [],
      personOptions: [],
      oneLoading: false,
    };
  },
  created() {
    const _this = this;
    this.tableHeader = [
      {
        prop: "planNo",
        label: "编码",
        sortable: false,
        overflow: true,
        align: "left",
      },
      {
        prop: "unitName",
        label: "单位名称",
        sortable: false,
        overflow: true,
        width: 180,
        align: "left",
      },
      {
        prop: "chargePerson",
        label: "负责人",
        sortable: false,
        overflow: true,
        align: "left",
      },
      {
        prop: "linkTelephone",
        label: "联系电话",
        sortable: false,
        overflow: true,
        align: "left",
      },
      {
        prop: "unitType",
        label: "企业类型",
        sortable: false,
        align: "left",
        render: (h, vm) => {
          const arr = _this.plugins_met_unit_type.filter((item) => {
            return vm.unitType == item.codeValue;
          });
          return <span>{arr[0].codeName}</span>;
        },
      },
      {
        prop: "districtName",
        label: "所在区县",
        sortable: false,
        overflow: true,
        align: "left",
      },
      {
        prop: "rawPersonName",
        label: "执法人员",
        sortable: false,
        overflow: true,
        align: "left",
      },
      {
        prop: "proofUpload",
        label: "佐证材料",
        sortable: false,
        overflow: true,
        align: "left",
        render: (h, vm) => {
          const arr = _this.PLUGINS_MET_UPLOAD_STATUS.filter((item) => {
            return vm.proofUpload == item.codeValue;
          });
          if (arr[0].codeValue != 1) {
            return <span class="text-warning">{arr[0].codeName}</span>;
          } else {
            return <span class="text-success">{arr[0].codeName}</span>;
          }
        },
      },
      {
        prop: "inspectStatus",
        label: "检查状态",
        sortable: false,
        overflow: true,
        align: "left",
        render: (h, vm) => {
          const arr = _this.PLUGINS_MET_INSPECT_STATUS.filter((item) => {
            return vm.inspectStatus == item.codeValue;
          });
          return <span>{arr[0].codeName}</span>;
        },
      },
      {
        prop: "signStatus",
        label: "签名状态",
        sortable: false,
        overflow: true,
        align: "left",
        render: (h, vm) => {
          if (!vm.signStatus || vm.signStatus === 0) {
            return <span>暂无签署流程</span>;
          } else if (vm.signStatus === 1) {
            return <span class="text-warning">始化签署流程</span>;
          } else if (vm.signStatus === 2) {
            return <span class="text-danger">执法签署完成</span>;
          } else {
            return <span class="text-success">单位签署完成</span>;
          }
        },
      },
      {
        width: 100,
        label: "操作",
        align: "left",
        fixed: "right",
        buttonList: (row, index) => {
          let arr = [];
          if (!row.signStatus || row.signStatus == 0 || row.signStatus == 1) {
            arr = [
              {
                text: "立即上传",
                type: "text",
                event: this.handleDetail,
              },
            ];
          }
          return arr;
        },
      },
    ];
    this.getTableData();
  },
  mounted() {
    this.getLawPersonList();
  },
  methods: {
    handleDetail(row) {
      this.$router.push({
        name: "uploadTable",
        query: {
          detailId: row.detailId,
        },
      });
    },
    // 获取执法人员
    getLawPersonList() {
      getLawPerson(this.personSearch)
        .then((res) => {
          if (!res) return;
          const { data } = res;
          this.personOptions = data;
        })
        .catch((err) => {
          console.log("TCL: getTableData -> err", err);
        });
    },
    remoteMethod(query) {
      if (query !== "") {
        this.personSearch.q_legal_person = query;
        this.oneLoading = true;
        setTimeout(() => {
          this.oneLoading = false;
          this.getLawPerson(this.personSearch);
        }, 200);
      } else {
        this.personOptions = [];
      }
    },
    handleName(name) {
      this.searchForm.raw_person_name = name;
    },
    getTableData() {
      this.loading = true;
      this.getTableParams();
      getCheckCompanyList(this.tableParams)
        .then((res) => {
          if (!res) return;
          const { data, totalCount } = res;
          setTimeout(() => {
            this.loading = false;
            this.total = totalCount;
            this.tableData = data;
            // .filter((item) => item.signStatus == 1 || item.signStatus == 0)
          }, 500);
        })
        .catch((err) => {
          console.log("TCL: getTableData -> err", err);
        });
    },
  },
};
</script>
